<template>
  <!-- 用户卡片 -->
  <div class="userCar">
    <div class="imgBox">
      <img :src="user.userImg || user.userImg" alt="" />
    </div>
    <div class="userInfo">
      <span>{{ user.username }}</span>
      <span>邮箱：{{ user.email }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["user"],
};
</script>

<style lang="scss" scoped>
.userCar {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;

  .imgBox {
    width: 55px;
    height: 55px;
    background-color: #ccc;
    overflow: hidden;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .userInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 16px;

    span {
      font-size: 16px;
      text-align: left;
      &:nth-child(1) {
        color: #666;
      }
      &:nth-child(2) {
        color: #999;
      }
    }
  }
}
</style>
